import React from 'react';
import { Link } from 'react-router-dom';
import { Card, Row, Col, Typography, Tag } from 'antd';
import { SmileOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

// 模拟全站数据。在真实应用中，这些数据会从API获取。
const allData = [
  {
    id: 1,
    title: "初探 React Hooks",
    publishDate: "2024-03-15",
    category: "技术分享",
    content: "..."
  },
  {
    id: 2,
    title: "一次难忘的徒步旅行",
    publishDate: "2024-03-22",
    category: "生活随笔",
    content: "上周末，我和几位朋友一起去郊外进行了一次徒步旅行..."
  },
  {
    id: 4, // 假设这是另一篇生活随笔
    title: "周末的咖啡馆时光",
    publishDate: "2024-04-05",
    category: "生活随笔",
    content: "一个悠闲的下午，在街角的咖啡馆，阳光正好..."
  },
];

// 筛选出生活随笔
const lifePosts = allData.filter(item => item.category === '生活随笔');

/**
 * 生活点滴列表页面
 */
const LifePage = () => {
  return (
    <div className="bg-gray-50 py-8 px-4 sm:px-6 lg:px-8" style={{marginBottom:'13%'}}>
      <div className="container mx-auto">
        <Title level={2} style={{ textAlign: 'center', marginBottom: '16px' }}>
          <SmileOutlined style={{ marginRight: '12px' }} />
          生活点滴
        </Title>
        <Paragraph style={{ textAlign: 'center', marginBottom: '32px', maxWidth: '600px', margin: '0 auto 32px' }}>
          这里记录了我在生活中的一些感悟、趣事和难忘的瞬间。
        </Paragraph>
        
        <Row gutter={[24, 24]}>
          {lifePosts.map(post => (
            <Col xs={24} sm={12} md={8} key={post.id}>
              <Card
                hoverable
                style={{ height: '100%' }}
                cover={
                  <div className="h-48 bg-gradient-custom-3 flex items-center justify-center">
                    <SmileOutlined style={{ fontSize: '48px', color: 'rgba(255,255,255,0.8)' }}/>
                  </div>
                }
              >
                <Card.Meta
                  title={<Link to={`/details/${post.id}`} className="text-lg font-semibold">{post.title}</Link>}
                  description={
                    <Paragraph ellipsis={{ rows: 3 }} style={{ color: '#6b7280' }}>
                      {post.content}
                    </Paragraph>
                  }
                />
                <div style={{ marginTop: '16px', paddingTop: '16px', borderTop: '1px solid #f0f0f0' }}>
                  <Tag>{post.publishDate}</Tag>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </div>
  );
};

export default LifePage; 